<template>
    <aside class="cus-flip-wrap m-b bt-line">
        <h4 class="cus-flip__title no-select m-b">翻转</h4>
        <div class="cus-flip__item">
            <n-button class="flip-btn" type="primary" size="small" ghost @click="flipItem('x')">沿X轴翻转</n-button>
            <n-button class="flip-btn" type="info" size="small" ghost @click="flipItem('y')">沿Y轴翻转</n-button>
        </div>
    </aside>
</template>

<script setup name="FlipMode">
import useSharedCore from '@/hooks/shared';

const { coverEditor } = useSharedCore();

// Function flip
function flipItem(val) {
    const node = coverEditor?.canvas?.getActiveObject() || null
    if (node) {
        const flipWay = val === 'x' ? 'flipX' : 'flipY'
        coverEditor.canvas.getActiveObject().toggle(flipWay);
        coverEditor.canvas.renderAll();
    }
}

</script>

<style lang="scss">
    .cus-flip-wrap {
        padding-bottom: 12px;
    }
    .cus-flip {
        &__title {
            font-size: 14px;
        }
        &__item {
           .flip-btn {
            margin-right: 8px;
           }
        }
    }
</style>